import React, { useEffect, useState } from 'react'
import { getAdminListFn, addAdminFn, editAdminFn, delAdminFn } from '../../api/user'
import { Popconfirm, Table, Button, Tag, Drawer, Input, Select, Tree, message, Modal } from 'antd';
import menus from '../../router/index'

export default function Index() {

    const [adminList, setAdminList] = useState([])

    // 表示的是当前页码
    const [current, setcurrent] = useState(1)

    useEffect(() => {
        getAdminListFn().then(res => {
            // console.log(res);
            setAdminList(res.data)
        })
    }, [])

    // table 列的配置项
    const columns = [
        {
            title: '序号',
            dataIndex: 'telcode',
            render(text, record, index) {
                return <span>{(current - 1) * 10 + index + 1}</span>
            }
        }, {
            title: '管理员名称',
            dataIndex: 'adminname'
        }, {
            title: '管理员类型',
            dataIndex: 'role',
            render(t, r, i) {
                return (t == 1 ?
                    <Tag color="green">管理员</Tag>
                    :
                    <Tag color="blue">超级管理员</Tag>)
            }
        }, {
            title: '操 作',
            render(t) {
                return (<>
                    <Button onClick={() => { editClick(t) }}>编辑</Button>
                    <Popconfirm
                        title="温馨提示"
                        description={<>您确定要删除 <b style={{ color: 'red' }}> {t.adminname} </b> 吗？</>}
                        onConfirm={() => { delClick(t) }}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button>删除</Button>
                    </Popconfirm>

                </>)
            }
        }
    ]


    // ------------------- 添加管理员 -------------------
    const [open, setopen] = useState(false)

    // 用来收集用户输入和选择的内容信息
    const [adminname, setadminname] = useState('')
    const [password, setpassword] = useState('')
    const [role, setrole] = useState(1)
    const [checkedKeys, setcheckedKeys] = useState([])

    function addClick() {
        // console.log(adminname, password, role, checkedKeys);

        addAdminFn({
            adminname, password, role, checkedKeys
        }).then(res => {
            // console.log(res);
            if (res.code == 200) {
                // 清除表单数据
                setadminname('')
                setpassword('')
                setrole(1)
                setcheckedKeys([])

                // 重新获取数据
                getAdminListFn().then(res => {
                    // console.log(res);
                    setAdminList(res.data)
                })

                // 关闭抽屉
                setopen(false)

                // 轻提示
                message.success(res.message)
            }
        })
    }



    // ------------------------ 编辑管理员
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 提交编辑的内容
    const handleOk = () => {
        setIsModalOpen(false);

        // console.log(adminname, password, role, checkedKeys);
        editAdminFn({
            adminname, password, role, checkedKeys
        }).then(res => {
            if (res.code == 200) {
                // 清除表单数据
                setadminname('')
                setpassword('')
                setrole(1)
                setcheckedKeys([])

                // 重新获取数据
                getAdminListFn().then(res => {
                    // console.log(res);
                    setAdminList(res.data)
                })

                // 轻提示
                message.success(res.message)
            }
        })
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 点击编辑按钮
    function editClick(t) {
        // console.log(t);
        setIsModalOpen(true);
        setadminname(t.adminname)
        setpassword(t.password)
        setrole(t.role)
        setcheckedKeys(t.checkedKeys)
    }


    // ------------------------ 删除管理员
    function delClick(t) {
        console.log(t.adminid);
        delAdminFn({
            adminid: t.adminid
        }).then(res => {
            if (res.code == 200) {
                message.success('删除管理员成功')

                // 重新获取数据
                getAdminListFn().then(res => {
                    // console.log(res);
                    setAdminList(res.data)
                })
            }
        })
    }
    return (
        <div>
            <h3>
                管理员列表
                &#x3000;
                <Button onClick={() => { setopen(true) }}>添加管理员</Button>
            </h3>


            <Table
                columns={columns}
                dataSource={adminList}
                rowKey={'adminid'}
                scroll={{ y: 500 }}
                pagination={{
                    current,
                    onChange(page) {
                        // 记录当前页
                        setcurrent(page)
                    }
                }} />

            {/* 添加管理员的抽屉组件 */}
            <Drawer title="添加管理员" onClose={() => { setopen(false) }} open={open}>

                <Input value={adminname} onChange={e => { setadminname(e.target.value) }} placeholder="请输入管理员账号" />
                <Input value={password} onChange={e => { setpassword(e.target.value) }} placeholder="请输入管理员密码" />
                <Select value={role} onChange={e => { setrole(e) }} placeholder='请选择管理员类型'>
                    <Select.Option value={1}>管理员</Select.Option>
                    <Select.Option value={2}>超级管理员</Select.Option>
                </Select>
                <Tree
                    checkable
                    treeData={menus}
                    defaultExpandAll
                    fieldNames={{ title: 'label' }}
                    checkedKeys={checkedKeys}
                    onCheck={checkedKeys => {
                        // 获取选中的内容
                        setcheckedKeys(checkedKeys)
                    }}
                />
                <Button onClick={addClick}>添 加</Button>
            </Drawer>


            {/* 编辑管理员的对话框 */}
            <Modal
                title="编辑管理员"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                cancelText='取消'
                okText='确定'
            >
                <Input value={adminname} onChange={e => { setadminname(e.target.value) }} placeholder="请输入管理员账号" />
                <Input disabled value={password} onChange={e => { setpassword(e.target.value) }} placeholder="请输入管理员密码" />
                <Select value={role} onChange={e => { setrole(e) }} placeholder='请选择管理员类型'>
                    <Select.Option value={1}>管理员</Select.Option>
                    <Select.Option value={2}>超级管理员</Select.Option>
                </Select>
                <Tree
                    checkable
                    treeData={menus}
                    defaultExpandAll
                    fieldNames={{ title: 'label' }}
                    checkedKeys={checkedKeys}
                    onCheck={checkedKeys => {
                        // 获取选中的内容
                        setcheckedKeys(checkedKeys)
                    }}
                />
            </Modal>


        </div>
    )
}
